Si está creando una página dinámica, por ejemplo: product/[slug].tsx , incluso si no desea crear ninguna página en el momento de la compilación, debe crear un método getStaticPaths para establecer la propiedad fallback y dejar que NextJS sepa qué hacer. cuando la página que está tratando de obtener no existe.

 export const getStaticPaths: GetStaticPaths<{ slug: string }> = async () => { return { paths: [], //indicates that no page needs be created at build time fallback: 'blocking' //indicates the type of fallback } }

getStaticPaths hace principalmente dos cosas:

• Indique qué rutas deben crearse en el momento de la compilación (devolviendo una matriz de paths )

• Indique qué hacer cuando una página determinada, por ejemplo: "producto/miProducto123" no existe en el caché de fallback (devolviendo un tipo de respaldo)

Enrutamiento dinámico Siguiente Js

páginas/usuarios/[id].js

 import React from 'react' const User = ({ user }) => { return ( <div className="row"> <div className="col-md-6 offset-md-3"> <div className="card"> <div className="card-body text-center"> <h3>{user.name}</h3> <p>Email: {user.email} </p> </div> </div> </div> </div> ) } export async function getStaticPaths() { const res = await fetch('https://jsonplaceholder.typicode.com/users') const users = await res.json() const paths = users.map((user) => ({ params: { id: user.id.toString() }, })) return { paths, fallback: false } } export async function getStaticProps({ params }) { const res = await fetch(`https://jsonplaceholder.typicode.com/users/${params.id}`) const user = await res.json() return { props: { user } } } export default User

si está utilizando getStaticPaths , le está diciendo a next.js que desea generar previamente esa página. Sin embargo, dado que lo usó dentro de una página dinámica, next.js no sabe de antemano cuántas páginas tiene que crear.

con getStaticPaths , buscamos la base de datos. Si estamos representando blogs, buscamos la base de datos para decidir cuántos blogs tenemos, cuál sería idOfBlogPost y luego, en función de esta información, getStaticPath páginas.

además, getStaticProps no se ejecuta solo durante el tiempo de compilación. Si agrega revalidate:numberOfSeconds , next.js recreará una nueva página con datos nuevos después del tiempo de "numberOfSeconds".

Para representar una ruta dinámica, use getServerSideProps() en lugar de getStaticProps()

Por ejemplo:

 export async function getServerSideProps({ locale, }: GetServerSidePropsContext): Promise<GetServerSidePropsResult<Record<string, unknown>>> { return { props: { ...(await serverSideTranslations(locale || 'de', ['common', 'employees'], nextI18nextConfig)), }, } }

Puedes consultar aquí también